import { useState } from 'react';

function Headless(props){
    const { name: nameDefault = '', age: ageDefault = '', job: jobDefault = '', children } = props;
    const [name, SetName] = useState(nameDefault);
    const [age, SetAge] = useState(ageDefault);
    const [job, Setjob] = useState(jobDefault);
    const submitHandler = (obj) => {
        console.log('submit info', obj);
    }
    if(typeof children === 'function'){
        return children(submitHandler);
    }else {
        return <div>
            【姓名】：<input placeholder="名字" value={name} onChange={(e) => {SetName(e.target.value);}} /><br />
            【年龄】：<input placeholder="年龄" value={age} onChange={(e) => {SetAge(e.target.value);}} /><br />
            【职业】：<input placeholder="职业" value={job} onChange={(e) => {Setjob(e.target.value);}} /><br />
            <input type="submit" value="提交" onClick={() => {
                submitHandler({name, age, job});
            }} />
        </div>;
    }
}

function SubmitForm(props){
    return <Headless {...props} />;
}

export {
    Headless as Core,
    SubmitForm as default
}